<template>
  <div class="hospital-container">

   <div class="examine">
     <ul>
       <li>待审批</li>
       <li>通过</li>
       <li>未通过</li>
     </ul>
     <div class="bboxx">
     <div class="physician">医师职称: <select ><option value="">医师职称</option></select> </div>
     <div>隶属医院: <input type="text" placeholder="请出入医师姓名"> </div>
     <div class="Become">从医年限: <input type="text" ></div>
     <el-button size="mini" round class="bbu">搜索</el-button>
       </div>
   </div >
   <div class="nameme">
     <el-table
    :data="tableData"
    stripe
    style="width: 90%,margin:0 10px">
    <el-table-column
      prop="date"
      label="序号"

      width="110">
    </el-table-column>
    <el-table-column
      prop="name"
      label="医师姓名"
      align="center"
      width='230'

      >
    </el-table-column>
     <el-table-column
      prop="address"
      label="隶属医院"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="dengji"
      label="医师等级"
      align="center"
      >
    </el-table-column>
     <el-table-column
      prop="age"
      label="年限"
      align="center"
      >
    </el-table-column>
     <el-table-column
      prop="zige"
      label="医师资格证书"
      align="center"
      >
      <el-button @click="handleClick(scope.row)" type="text" size="small"><img src="../../assets/7_r2_c2.png" alt=""></el-button>
    </el-table-column>
     <el-table-column
      prop="zs"
      label="医师执行证书"

      >
      <el-button @click="handleClick(scope.row)" type="text" size="small"><img src="../../assets/7_r2_c2.png" alt=""></el-button>
    </el-table-column>
     <el-table-column
      prop="sfz"
      label="身份证"

      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small"><img src="../../assets/7_r2_c2.png" alt=""></el-button>

      </template>
    </el-table-column>
     <el-table-column
      prop="cz"
      label="操作"
      width="250"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small" class='box'>通过</el-button>
        <el-button type="text" size="small" class='box'>不通过</el-button>
        <el-button type="text" size="small" class='box'>详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '1',
        name: '王振',
        address: '北京301',
        dengji: '主治医师',
        age: '5',
        zige: '555',
        zs: '6666',
        sfz: '999',
        cz: '通过,不通过，详情'
      }, {
        date: '2',
        name: '李双双',
        address: '上海华山',
        dengji: '主治医师',
        age: '8',
        zige: '555',
        zs: '6666',
        sfz: '999',
        cz: '通过,不通过，详情'
      }, {
        date: '3',
        name: '张三丰',
        address: '北京协和',
        dengji: '主治医师',
        age: '10',
        zige: '555',
        zs: '6666',
        sfz: '999',
        cz: '通过,不通过，详情'
      }]
    }
  }
}
</script>

<style>

  .examine{
    display: flex;
    height: 70px;
    margin-left: 5px;
    font-size: 20px;
    margin:20px 0 0 10px;

  }
  .examine ul{
    display: flex;
  }
  .examine ul li{
    width: 80px;
    height: 45px;
    background: #ccc;
    color: #fff;
    margin: 0 10px;
    text-align: center;
    line-height: 45px;
    font-size: 20px;

  }
  .examine ul li:hover{
    background: #2F95F6;
  }
  .bboxx{
    display: flex;
    justify-content: space-around;
    margin-left: 300px;
  }
  .bboxx div{
    margin-left: 10px;
  }
  .physician{
   display: flex;
  }
  .examine button{
    height: 30px;
    width: 70px;
    background: #2F95F6;
    margin-left: 10px;
    color:#fff;

  }
  select{
    height: 28px;
    width: 106px;
    color: #9E9E9E;
    border-radius: 2px;
  }
  input{
  height: 25px;
  margin-left: 10px;
  color:#cccc;
}
.el-table .cell{
  text-align: center;
}
.el-table th>.cell{
  font-size: 20px;
  color: #000;

}
.el-table th {
  background:#F2F2F2;
}
.el-pagination {
  margin-top: 300px;
}
.el-table td{
  border-left: 1px solid #F0F0F0;
  height: 70px;
}
.el-table__body td{
  height: 80px;
}
.box{
  height:  35px;
  width:60px;
  border-radius: 20px;
  color:#fff

}
.box:first-child{
  background: #377D22
}
.box:nth-child(2){
  background:#8D1A11
}
.box:nth-child(3){
  background: #429BD0
}
.box img{
  width: 50px;
  height: 70px;
}
.el-button--small{
padding: 0 10px
}
</style>
